<template>
	<div class="BindingPhone">
		<!--logo-->
		<div class="b-logo-box">
			<div class="logoimg-box">
				<img class="logo-img" src="../assets/img/images/logo_f_05.png" />
			</div>
		</div>
		<!--输入框-->
		<div class="BindingPhone-input-box">
			<div class="b-input-item">
				<div class="bii-icon">
					<img class="bii-icon-img" src="../assets/img/images/login-user_03.png" />
				</div>
				<yd-cell-item class="bmy-cellitem">
					<span slot="left">
 <yd-input slot="right" class="input-user" v-model="phone2" required :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="输入手机号"></yd-input>	
						</span>
				</yd-cell-item>
			</div>
			<div class="b-input-item" style="margin-top: .32rem;">
				<div class="bii-icon">
					<img class="bii-icon-img" src="../assets/img/images/login-user1_03.png" />
				</div>
				<div class="bmy-cellitem">
					<input type="text" v-model="vercode" class="input-user input-yam" placeholder="验证码" />
					<span class="getyan" v-if="!codesta" @click="Verification()">{{codetiem}}</span>
					<span class="getyan" v-if="codesta">{{codetiem}}</span>
				</div>
			</div>
		</div>

		<div class="submit-btn" @click="Signin">
			关联手机号
		</div>
	</div>
</template>

<script>
	export default {
		name: "BindingPhone",
		data() {
			return {
				source: "web",
				codetiem: "获取验证码",
				codesta: false,
				phone2: "",
				vercode: ''
			}
		},
		methods: {
			//			手机验证码登录

			num() {
				let that = this;
				let n = 60
				that.codesta = true;
				let setter = setInterval(function() {
					n--;
					that.codetiem = n + "s";
					if(n == 0) {
						that.codetiem = "获取验证码"
						that.codesta = false;
					}

				}, 1000)
				setTimeout(function() {
					clearInterval(setter)
				}, 60000)
			},
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.BindingPhone {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		font-size: .31rem;
	}
	
	.BindingPhone .b-logo-box {
		width: 100%;
		height: 3.33rem;
	}
	
	.BindingPhone .logo-img {
		display: block;
		width: 1.75rem;
		height: 1.75rem;
		margin: .67rem auto;
	}
	
	.BindingPhone .BindingPhone-input-box {
		width: 100%;
		padding: 0 .69rem;
		box-sizing: border-box;
	}
	
	.BindingPhone .b-input-item {
		width: 6.1rem;
		display: flex;
		align-items: center;
		padding: .14rem 0;
		box-sizing: border-box;
		border-bottom: 1px solid #9c9c9c;
	}
	
	.BindingPhone .bii-icon {
		width: .8rem;
		display: flex;
		align-items: center;
		border-right: 1px solid #9C9C9C;
	}
	
	.BindingPhone .bmy-cellitem {
		height: .47rem;
	}
	
	.BindingPhone .input-user {
		width: 5.28rem;
		padding-left: .01rem;
		box-sizing: border-box;
		height: .47rem;
		border: none;
	}
	
	.BindingPhone .bii-icon-img {
		display: block;
		width: .43rem;
		height: .47rem;
		margin: auto;
	}
	
	.BindingPhone .input-yam {
		width: 3.5rem;
	}
	
	.BindingPhone .bmy-cellitem {
		display: flex;
		padding-left: .1rem;
		box-sizing: border-box;
	}
	
	.BindingPhone .getyan {
		width: 1.6rem;
		text-align: right;
		display: block;
		color: #E34648;
		text-decoration: underline;
	}
	
	.BindingPhone .submit-btn {
		width: 5.6rem;
		line-height: .75rem;
		background: #E34648;
		font-size: .34rem;
		color: #fff;
		text-align: center;
		margin: 1.01rem auto;
		border-radius: .05rem;
	}
	
	.BindingPhone .yd-cell-icon {
		margin-right: 0 !important;
	}
</style>